<template>
  <div>
    <a-card title="结业换证时间设置">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="报名开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['startTime', { rules: [{ required: true, message: '请选择开始时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="报名结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['endTime', { rules: [{ required: true, message: '请选择结束时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="审核截止时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['reviewEndTime', { rules: [{ required: true, message: '请选择审核截止时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
          <a-button type="primary" html-type="submit">保存设置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    
    <a-card title="当前时间设置" style="margin-top: 20px">
      <a-table :columns="timeColumns" :dataSource="timeData" :pagination="false">
        <template slot="operation" slot-scope="text, record">
          <a @click="editTime(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteTime(record)">删除</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const timeColumns = [
  {
    title: '学期',
    dataIndex: 'semester',
    key: 'semester'
  },
  {
    title: '报名开始时间',
    dataIndex: 'startTime',
    key: 'startTime'
  },
  {
    title: '报名结束时间',
    dataIndex: 'endTime',
    key: 'endTime'
  },
  {
    title: '审核截止时间',
    dataIndex: 'reviewEndTime',
    key: 'reviewEndTime'
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      timeColumns,
      timeData: [
        {
          key: '1',
          semester: '2022-2023学年第二学期',
          startTime: '2023-05-01 08:00:00',
          endTime: '2023-05-15 17:00:00',
          reviewEndTime: '2023-05-20 17:00:00'
        },
        {
          key: '2',
          semester: '2022-2023学年第一学期',
          startTime: '2022-11-01 08:00:00',
          endTime: '2022-11-15 17:00:00',
          reviewEndTime: '2022-11-20 17:00:00'
        }
      ]
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.$message.success('时间设置保存成功')
        }
      })
    },
    editTime(record) {
      console.log('编辑:', record)
      this.form.setFieldsValue({
        startTime: this.$moment(record.startTime, 'YYYY-MM-DD HH:mm:ss'),
        endTime: this.$moment(record.endTime, 'YYYY-MM-DD HH:mm:ss'),
        reviewEndTime: this.$moment(record.reviewEndTime, 'YYYY-MM-DD HH:mm:ss')
      })
    },
    deleteTime(record) {
      this.$confirm({
        title: '确认删除这条时间设置吗?',
        content: '删除后将无法恢复',
        onOk: () => {
          this.timeData = this.timeData.filter(item => item.key !== record.key)
          this.$message.success('删除成功')
        }
      })
    }
  }
}
</script>